<template>
  <div class="box">
    <Chart :option="options" />
  </div>
</template>

<script lang="js">
import { defineComponent, reactive } from 'vue'
import Chart from '@/views/charts/index.vue'
import option from './modules/circle'
import admin from "@/api/admin.js";

export default defineComponent({
  components: {
    Chart
  },
  setup() {

    const options = reactive(option)
    const countList= [
      { id: 1, name: '女', data: 300, color: '#4e73df', displayValue: 0 },
      { id: 2, name: '男', data: 300, color: '#1cc88a', displayValue: 0 },
    ]

    const getWomenSum = () =>{
      const womenSum ={
        sex: '女',
        // status: null,
        pageIndex: 0,
        pageSize: 10
      };
      admin.patientSearch(womenSum)
          .then((res) => {
            if (res.data.code === 200) {
              // 将状态码转换为中文描述
              const dataResult = res.data.data
              countList[0].data = dataResult.totalCount
              options.series[0].data[0].value= dataResult.totalCount
              //animateValue(item, 0, item.data, 1000);
            }
          })
          .catch((err) => {
            console.log(err);
          })
    }
    const getMenSum = () => {
      const menSum = {
        sex: '男',
        // status: null,
        pageIndex: 0,
        pageSize: 10
      };
      admin.patientSearch(menSum)
          .then((res) => {
            if (res.data.code === 200) {
              // 将状态码转换为中文描述
              const dataResult = res.data.data
              countList[1].data = dataResult.totalCount
              options.series[0].data[1].value = dataResult.totalCount
            }
          })
          .catch((err) => {
            console.log(err);
      })
    }
    getWomenSum()
    getMenSum()



    return {
      options
    }
  }
})
</script>

<style lang="scss" scoped>
  .box {
    margin: 20px auto 0;
    width: calc(100% - 40px);
    //height: 400px;
    background: var(--system-page-background);
    padding: 20px 20px 10px;
    overflow: hidden;
  }
</style>